<template>
	<view class="content">
		<u-navbar :autoBack="true" bgColor="rgba(0,0,0,0)" :fixed="true" @click-left="$back" ></u-navbar>
		
		<image :src="'/images/qbg_02.png' | formatImgUrl" class="bei" mode=""></image>
		<view class="neibox">
			<view class="title">
				写手认证<br>
				开启接单权限！
			</view>
			<view class="bibox">
				<view class="bititle">
					笔龄
				</view>
				<input type="number" maxlength="3" class="biput" placeholder="请输入笔龄" v-model="form.pen_age">
				<view class="niantxt">
					年
				</view>
			</view>
			
			<view class="bibox">
				<view class="bititle">
					佣金分成
				</view>
				<!-- <image src="../../static/images/tantan.png" @click="tuishow = true" class="shan" mode=""></image> -->
				<input   disabled type="text" class="biput" placeholder="90%" style="color: #000;">
			</view>
		
			<view class="bibox">
				<view class="bititle">
					实际年龄
				</view>
				<!-- <image src="../../static/images/tantan.png" @click="tuishow = true" class="shan" mode=""></image> -->
				<view class="cenbox" @tap="showType=true">
					<!-- <picker @change="bindPickerChange" :value="form.age" :range="array"> -->
						<view class="centxt">{{form.age ? array[form.age] : '请选择'}}</view>
					<!-- </picker> -->
				</view>
			</view>
			
			<view class="bibox">
				<view class="bititle">
					作品上传
				</view>
				<view class="biput" style="color: #999;">
					至多三张
				</view>
			</view>
			<view class="imgView">
				<!-- <view v-for="(img,index) in form.img" class="imgList">
					<image :src="img | formatImgUrl" mode="aspectFill" style="width: 180rpx;height: 184rpx; "></image>
					<view class="imgClose" @click="deletePic(index)">×</view>
				</view>
				<image :src="'/images/uploadimg.png' | formatImgUrl" mode="widthFix" style="width: 180rpx;height: 184rpx;"
					@click="onChooseImg" v-if="form.img.length < 3"></image> -->
					
				<u-upload ref="uUpload" :uploadIcon="'/images/up.png' | formatImgUrl" :multiple="true" maxCount="3" width="90" height="90" :action="uploadImgUrl" :fileList="form.img" @afterRead='afterRead' @delete="deletePic">
				</u-upload>
			</view>
			
			<view class="xubox">
				<view class="xuztxt">
					认证说明:<br>
					开动账号的的写手功能认证，可获得平台接单等相应权限，
					写手可通过此功能功能获得收益。
				</view>
				<view class="xuztxt">
					如何开通:<br>
					用户开通写手认证需要填写相应信息上传，平台审核完成后即可开启写手权限。
				</view>
			</view>
		</view>
		<!-- 风格 -->
		<u-popup :show="tuishow" :round="10" mode="center" @close="tuiclose" @open="open">
			<view class="tuichu">
				<view class="tuititle">
					创作类型填写建议
				</view>
				<view class="tuitxt">
					我们会根据您填写的擅长类型标签推荐给相应用户，请尽量全面地选择符合自身情况的标签，并上传对应的例文。
				</view>
			</view>
			<image :src="'/images/close.png' | formatImgUrl" @click="tuishow = false" class="baiclose" mode=""></image>
		</u-popup>

		<view class="dibox" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}">
			<view class="zaibox">
				<view class="zaileft">
					<view class="dbox">
						<view class="zaititle">
							立即开启
						</view>
						<view class="text">
							开通平台写手权限
						</view>
					</view>
					<view class="zaitxt">
						我承诺成为写手后遵守平台相关规定
					</view>
				</view>
				<view class="que" :class="{'isactive' : shuru}" @click="submit()">
					写手认证
				</view>
			</view>
			<view class="xiebox" @click="taiTab" :class="isRead == 1 ? 'shake-horizontal' : ''">
				<label>
					<!-- <checkbox style="transform: scale(0.7);" :checked="isRead" /> -->
					<u-checkbox shape="circle" size="14" :checked="isRead" activeColor="#45C4B0" inactiveColor="#999" @change="changeBox"></u-checkbox>
				</label>
				<view class="xietxt">
					请阅读并同意：
					<text @click.stop="goToxie(8)">《写手违规管理办法》</text>
					、
					<text @click.stop="goToxie(11)">《写手佣金提现规则》</text>
				</view>
			</view>
		</view>
		
		<u-popup :show="showType" mode="bottom" @close="showType=false">
			<view class="custom-bot">
				<view class="title">
					年龄
				</view>
				<picker-view :value="types" @change="changeType" class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item,index) in array" :key="index">{{item}}</view>
					</picker-view-column>
				</picker-view>
		
				<view class="marginBorder"></view>
				<view class="btn" @tap="showType=false,saveType()">
					确认选择
				</view>
			</view>
		
		</u-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				form: {
					img: [],
					age:6,
					age_str:21
				},
				types: [6],
				array: ['请选择'
				, '16', '17','18','19','20','21'
				, '22', '23','24','25','26','27'
				, '28', '29','30','31','32','33'
				, '34', '35','36','37','38','39'
				, '40', '41','42','43','44','45'
				, '46', '47','48','49','50','51'
				, '51', '52','53','54','55','56'
				, '57', '58','59','60','61','62'
				, '63', '64','65','66','67','68'
				, '69', '70','71','72','73','74'
				, '75', '76','77','78','79','80'
				, '81', '82','83','84','85','86'
				, '87', '88','89','90','91','92'
				, '93', '94','95','96','97','98'
				],
				paddingBottomHeight: 0, //苹果X以上手机底部适配高度
				// 图片
				fileList: [],
				// 是否输入完成
				shuru: true,
				isRead: false,
				tuishow:false,
				biaoqian:[],
				fileList2: [],
				showType: false
			}
		},
		onShow(){
			this.form.style = uni.getStorageSync('writer_tags');
		},
		onLoad() {

		},
		created() {
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
					model.forEach(item => {
						//适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
						if (res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
							that.paddingBottomHeight = 40;
						}
					})
				}
			});
			var url = getCurrentPages()
			this.urlPath = '/' + url[0].route

		},
		methods: {
			changeType(e){
				this.types = e.detail.value
				this.form.age = e.detail.value[0]
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.form.img.length
				lists.map((item) => {
					this.form.img.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this.form.img[fileListLen]
					this.form.img.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: this.uploadImgUrl,
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							let datas = JSON.parse(res.data)
							this.fileList2.push(datas.url)
							setTimeout(() => {
								resolve(datas.url)
							}, 300)
						}
					});
				})
			},
			changeBox(e){
				this.isRead = e ? 2 : 0
			},
			bindPickerChange: function(e) {
			            console.log('picker发送选择改变，携带值为', e.detail.value)
			            this.form.age = e.detail.value
					
			},
			goToxie(id){
				if(id == 11){
					console.log(1111111111111111)
					uni.navigateTo({
							url: '/pages/user/abount_dea?id=11' 
						})
					return;
				}
				// pages/user/abount_dea
				uni.navigateTo({
					url: '/pages/user/abount_dea?id='+id
				})
				
				console.log(this.$config.default.Url + '/agreement/1000006',77)
				// uni.navigateTo({
				// 	url:'/pages/webview/webview?url=' +this.$config.default.Url + '/agreement/1000006'
				// })
			},
			taiTab(){
				this.isRead = (this.isRead == 2 ? 0 : 2);
				this.shuru = !this.shuru
			},
			// 退出弹框
			tuigroup(){
				this.tuishow = true
			},
			tuiclose() {
				this.tuishow = false
			},
			submit() {
				
			
		
				
				//测试弹窗  rw8um2woPZuyWmlZFrRYLslXmrIHd1MmcUTry7Ci3Yw
				
				if (!this.isRead) {
					this.isReadTip()
				} else {
					if (!this.form.pen_age) {
						this.$common.errorToShow('请输入笔龄')
						return
					}
					
					if (this.form.pen_age<0) {
						this.$common.errorToShow('笔龄不能小于0')
						return
					}
					
					if (this.form.pen_age>100) {
						this.$common.errorToShow('笔龄不能大于100')
						return
					}
					
					
					 this.form.age_str = this.array[this.form.age];
					 
				if (this.form.age_str == "请选择") {
					this.$common.errorToShow('请选择实际年龄')
					return
				}
				
				
				console.log(this.form.pen_age,666666666666)
				
							console.log(this.form.age_str,2121211212)
				
					if (this.form.pen_age * 1 > this.form.age_str*1) {
						
						this.$common.errorToShow('笔龄不能大于实际年龄')
						return
					}
					
		
					
					// if (!this.form.style) {
					// 	this.$common.errorToShow('请输入上传风格')
					// 	return
					// }
					if (!this.form.img.length) {
						this.$common.errorToShow('请上传作品图片')
						return
					}
					
					var _that = this;
					this.form.img = this.fileList2
					
					// #ifdef MP-WEIXIN
					uni.requestSubscribeMessage({
					    //此处填写刚才申请模板的模板ID
						tmplIds: ['rw8um2woPZuyWmlZFrRYLslXmrIHd1MmcUTry7Ci3Yw'],
						success (res) {
							
							_that.$api.default.request('writer/writerApply', _that.form).then((res) => {
								if (res.code) {
									_that.$common.successToShow(res.msg, () => {
										uni.redirectTo({
											url: '/pages/user/examine'
										})
									})
								}else{
									setTimeout(()=>{
										uni.navigateBack()
									},1500)
								}
							})
						},fail(err){
							
							_that.$api.default.request('writer/writerApply', _that.form).then((res) => {
								if (res.code) {
									_that.$common.successToShow(res.msg, () => {
										uni.redirectTo({
											url: '/pages/user/examine'
										})
									})
								}else{
									setTimeout(()=>{
										uni.navigateBack()
									},1500)
								}
							})
						}
					})
					// #endif
					// #ifndef MP-WEIXIN
					_that.$api.default.request('writer/writerApply', _that.form).then((res) => {
						if (res.code) {
							_that.$common.successToShow(res.msg, () => {
								uni.redirectTo({
									url: '/pages/user/examine'
								})
							})
						}else{
							setTimeout(()=>{
								uni.navigateBack()
							},1500)
						}
					})
					// #endif
					
					
				}
			},
			isReadTip() {
				if (!this.isRead) {
					this.$common.errorToShow('请先同意写手入团协议');
					this.isRead = 1
					setTimeout(() => {
						this.isRead = 0;
					}, 300)
					return
				}
			},
			// 删除图片
			deletePic(index) {
				this.form.img.splice(index, 1)
				this.fileList2.splice(index, 1)
			},
			onChooseImg() {
				this.$common.chooseImage({}, (data) => {
					if (data) {
						this.form.img.push(data)
					}
				}, 3)
			},
			open() {
				// console.log('open');
			},
			tuiclose() {
				this.tuishow = false
				// console.log('close');
			},
		}
	}
</script>

<style lang="scss">
	.custom-bot {
		text-align: center;
		background-color: #fff;
		
		.title{
			padding: 20px 0;
			font-family: '思源黑体';
			font-size: 14px;
			font-weight: bold;
			color: #3D3D3D;
		}
	
		.picker-view {
			width: 750rpx;
			height: 200rpx;
		}
	
		.item {
			height: 34px;
			line-height: 34px;
			font-family: '思源黑体';
			font-size: 15px;
			font-weight: bold;
			color: #3D3D3D;
		}
		
		.marginBorder{
			width: 100%;
			height: 10px;
			background: #F2F5F2;
		}
		
		.btn{
			margin: 10px auto;
			width: 315px;
			height: 40px;
			line-height: 40px;
			border-radius: 8px;
			background: #45C4B0;
			font-family: '思源黑体';
			font-size: 16px;
			font-weight: bold;
			color: #FFFFFF;
		}
	}
	
	page {
		background: rgba(242, 245, 242, 1);
	}

	.content {
		position: relative;
		padding: 204rpx 0 0;
		padding-top: 154px;

		.bei {
			width: 100%;
			height: 100vh;
			position: fixed;
			left: 0;
			top: 0;
			z-index: -1;
		}

		.neibox {
			padding: 0 70rpx;

			.title {
				font-size: 72rpx;
				font-weight: bold;
				letter-spacing: 0px;
				line-height: 104rpx;
				padding-bottom: 52rpx;
				color: #45C4B0;
			}


			.bibox:nth-child(5) {
				border: none !important;
			}

			.bibox {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 80rpx;
				border-bottom: 1px solid rgba(61, 61, 61, 0.1);
				position: relative;
				.shan{
					width: 32rpx;
					height: 32rpx;
					position: absolute;
					left: 120rpx;
					top: 26rpx;
					z-index: 66;
				}
				.bititle {
					font-size: 28rpx;
					font-weight: bold;
					letter-spacing: 0px;
					color: #3D3D3D;
					flex-grow: 1;
				}

				.biput {
					font-size: 28rpx;
					color: #3d3d3d;
					width: 400rpx;
					text-align: right;
					flex-shrink: 0;
				}
				.niantxt{
					font-size: 28rpx;
					font-weight: bold;
					line-height: 40rpx;
					text-align: right;
					letter-spacing: 0px;
					color: #3D3D3D;
					padding-left: 12rpx;
					flex-shrink: 0;
				}
			}

			.imgView {
				display: flex;
				align-items: center;

				.imgList {
					position: relative;
					margin-right: 30rpx;
					.imgClose {
						position: absolute;
						top: -8px;
						right: -8px;
						z-index: 1;
						width: 36rpx;
						height: 36rpx;
						background-color: #45C4B0;
						color: #fff;
						line-height: 36rpx;
						text-align: center;
						border-radius: 100px;
					}
				}
			}

			.xubox {
				padding-top: 45rpx;
			}

			.xuztxt {
				padding-bottom: 20rpx;
				line-height: 28rpx;
				font-size: 20rpx;
				font-weight: normal;
				letter-spacing: 0em;
				color: #999999;
			}
		}

		.dibox {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			z-index: 222;
			background-color: #ffffff;
			padding: 20rpx 0;

			.zaibox {
				width: 630rpx;
				height: 80rpx;
				border-radius: 12px;
				background: #3D3D3D;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 0 auto 10rpx;

				.zaileft {
					padding: 0 20rpx;

					.dbox {
						display: flex;
						align-items: center;

						.zaititle {

							font-size: 28rpx;
							font-weight: bold;
							background: linear-gradient(293deg, #45C4B0 -5%, #56E8B5 128%);
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
							background-clip: text;
							text-fill-color: transparent;

						}

						.text {
							font-size: 28rpx;
							font-weight: bold;
							color: #FFFFFF;
							padding-left: 8rpx;
						}
					}

					.zaitxt {
						font-size: 20rpx;
						font-weight: normal;
						letter-spacing: 0px;
						color: #999999;
					}
				}

				.que {
					width: 190rpx;
					height: 80rpx;
					border-radius: 10px;
					opacity: 1;
					background: #45C4B0;
					font-size: 24rpx;
					font-weight: bold;
					color: #FFFFFF;
					text-align: center;
					line-height: 80rpx;
				}

				.isactive {
					background: #999999;
				}
			}

			.xiebox {
				display: flex;
				align-items: center;
				justify-content: center;
				padding-bottom: 10rpx;

				.xietxt {
					font-size: 20rpx;
					font-weight: bold;
					color: #999999;

					text {
						font-size: 20rpx;
						font-weight: bold;
						color: #45C4B0;
						padding: 0 10rpx;
					}
				}
			}
		}
		.baiclose{
			width: 48rpx;
			height: 48rpx;
			margin: 40rpx auto 0;
		}
		.tuichu{
			background-color: #ffffff;
			border-radius: 8px;
			width: 534rpx;
			padding: 24rpx 0 ;
			text-align: center;
			.tuititle{
				font-size: 36rpx;
				font-weight: bold;
				text-align: center;
				letter-spacing: 0em;
				color: #3D3D3D;
				padding-bottom: 16rpx;
			}
			.tuitxt{
				padding: 0 66rpx;
				font-size: 28rpx;
				font-weight: normal;
				text-align: center;
				line-height: 40rpx;
				letter-spacing: 0em;
				color: #999999;
			}
			.quren{
				display: flex;
				align-items: center;
				justify-content: center;
				.quli{
					width: 180rpx;
					height: 60rpx;
					background-color: #F2F5F2;
					border-radius: 5rpx;
					margin: 0 20rpx;
					line-height: 60rpx;
					font-size: 26rpx;
					color: #333;
				}
				.active{
					background-color: #45C4B0;
					color: #ffffff;
				}
			}
		}
	}
</style>